<template>
  <div class='container'>莫昌省
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="6">
          <span>学科名称 </span>
          <el-input style="width:300px" v-model="queryIfon.subjectName" placeholder="根据学科搜索"></el-input>
        </el-col>
        <el-col :span="14">
          <el-button @click="buttonRemove"> 清除</el-button>
          <el-button type="primary" @click="getSublist">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-row type="flex" justify="end">
            <el-button type="success" @click="dialogVisible =true"> <i class="el-icon-edit"></i>新增学科标签</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert style="margin:15px 0" type="info" show-icon :closable="false">
        <template slot="title">数据一共{{ total }}条</template>
      </el-alert>
      <el-table :data="subList" border stripe>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="学科名称" prop="subjectName"></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="200px">
          <template v-slot="{row}">
            {{row.addDate| parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示" prop="isFrontDisplay">
          <template v-slot="{row}">
            <span v-if="row.isFrontDisplay ==1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory"></el-table-column>
        <el-table-column label="标签" prop="tags"></el-table-column>
        <el-table-column label="题目数量" prop="totals"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template v-slot="{row}">
            <el-link type="primary" @click="classification(row)">学科分类</el-link>
            <el-link type="primary" @click="tagfenlei(row)">标签分类</el-link>
            <el-link type="primary" @click="modify(row)">修改</el-link>
            <el-link type="primary" @click="xuekromed(row)">删除</el-link>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryIfon.page" :page-sizes="[2, 5, 6, 10]" :page-size="queryIfon.pagesize"
        layout="prev, pager, next ,sizes,total" :total=" total ">
      </el-pagination>
      <!-- 添加新科目 -->
      <el-dialog title="添加新科目" :visible.sync="dialogVisible" width="20%" @close="dialogClose">
        <el-form ref="dialogFormRef" :model="addForm" label-width="80px" :rules="dialogFormRules">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model="addForm.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model="addForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="kemu">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改表单 -->
      <el-dialog title="修改学科" :visible.sync="edlogVisible" width="30%" @close="dialogClose">
        <el-form ref="dialogFormRef" :model="editFrom" label-width="80px" :rules="dialogFormRules">
          <el-form-item label="学科名称" prop="subjectName">
            <el-input v-model=" editFrom.subjectName"></el-input>
          </el-form-item>
          <el-form-item label="是否显示">
            <el-switch v-model=" editFrom.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="edlogVisible = false">取 消</el-button>
          <el-button type="primary" @click="edlogVisible2">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      inputRemove: '',
      subList: [],
      queryIfon: {
        page: 1,
        pagesize: 10,
        subjectName: ''

      },
      total: 0,
      // dialogForm: {},
      dialogVisible: false,
      // 修改
      edlogVisible: false,
      // 修改
      editFrom: {},
      addForm: {
        subjectName: '',
        isFrontDisplay: true
      },
      dialogFormRules: {
        subjectName: [
          { required: true, message: '请输入科学名称', trigger: 'blur' }
        ]
      },
      // 路由参数
      userId: ''
    }
  },
  watch: {
    total () {
      if (this.total === (this.queryIfon.page - 1) * this.queryIfon.pagesize && this.total !== 0) { // 这一行是关键代码，倍数关系
        this.queryIfon.page -= 1
        this.getSublist()// 获取表格数据的方法
      }
    }
  },
  methods: {
    // 标签分类
    tagfenlei (row) {
      console.log(row)
      this.$router.push({ path: '/subjects/tags', query: { id: row.id, name: row.subjectName } })
      // }
    },
    // 学科分类
    async classification (row) {
      this.$router.push({ path: '/subjects/directorys', query: { id: row.id, name: row.subjectName } })
    },
    // 删除
    xuekromed (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove(id)
        console.log(res)
        if (res.status !== 200) return this.$message.error('删除失败')
        this.$message.success('删除成功')
        this.getSublist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async getSublist () {
      const res = await list(this.queryIfon)
      console.log(res)
      if (res.status !== 200) return this.$message.error('获取失败')
      // this.$message.success('获取成功')
      this.subList = res.data.items
      this.total = res.data.counts
      console.log(this.subList)
      console.log(this.total)
    },
    // 改变时会触发每页条数
    handleSizeChange (size) {
      console.log(size)
      this.queryIfon.pagesize = size
      this.getSublist()
    },
    // 改变时会触发当前页条
    handleCurrentChange (page) {
      this.queryIfon.page = page
      this.getSublist()
    },
    // 清除
    buttonRemove () {
      // console.log(111)
      this.inputRemove = ''
    },
    // x关闭弹框页面
    dialogClose () {
      this.$refs.dialogFormRef.resetFields()
    },
    // 添加新科目
    kemu () {
      this.$refs.dialogFormRef.validate(async (bool) => {
        // console.log(111)
        if (!bool) this.$message.error('表单验证失败')
        this.addForm.isFrontDisplay = +this.addForm.isFrontDisplay
        const res = await add(this.addForm)
        console.log(res)
        if (res.status !== 200) return this.$message.error('增加失败')
        this.$message.success('增加成功')
        this.dialogVisible = false
      })
    },
    // 修改
    modify (row) {
      console.log(row)
      this.edlogVisible = true
      this.editFrom = row
    },
    // 修改确定按钮
    async edlogVisible2 () {
      const res = await update(this.editFrom)
      // console.log(data)
      if (res.status !== 200) return this.$message.error('修改失败')
      this.$message.success('修改成功')
      this.edlogVisible = false
      this.getSublist()
    }

  },
  computed: {},
  filters: {},
  components: {},
  created () {
    this.getSublist()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-button {
  margin-left: 15px;
}
::v-deep .el-iconInfo {
  background: #f4f4f5;
  width: 100%;
  height: 32px;
  line-height: 32px;
}
.el-icon-info {
  padding: 0 15px;
}
.el-link {
  line-height: 32px;
  padding: 0 2px;
  font-size: 12px;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
